<template>
  <div class="navbar-container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#409EFF"
      text-color="#fff"
      active-text-color="#ffd04b"
      router>
      
      <!-- 品牌Logo -->
      <div class="brand-container">
        <router-link to="/" class="brand-link">
          <i class="el-icon-school"></i>
          <span class="brand-title">教室预约系统</span>
        </router-link>
      </div>
      
      <!-- 导航菜单项 -->
      <el-menu-item index="/">
        <i class="el-icon-s-home"></i>首页
      </el-menu-item>
      
      <el-menu-item index="/announcements">
        <i class="el-icon-bell"></i>公告
      </el-menu-item>
      
      <el-menu-item index="/rooms">
        <i class="el-icon-date"></i>教室预约
      </el-menu-item>
      
      <el-menu-item  @click="myReservations">
        <i class="el-icon-document-checked" ></i>我的预约
      </el-menu-item>
      
      <!-- 更多下拉菜单 -->
      <el-submenu index="more">
        <template slot="title">
          <i class="el-icon-info"></i>更多
        </template>
        <el-menu-item index="/help">
          <i class="el-icon-question"></i>帮助中心
        </el-menu-item>
        <el-menu-item index="/about">
          <i class="el-icon-office-building"></i>关于我们
        </el-menu-item>
        <el-menu-item @click="showFeedback">
          <i class="el-icon-chat-dot-square"></i>意见反馈
        </el-menu-item>
      </el-submenu>
      
      <!-- 用户操作区域 -->
      <div class="user-container">
        <template v-if="!isLoggedIn">
          <el-button 
            type="text"
            class="login-btn"
            @click="$router.push('/login')">
            <i class="el-icon-right"></i>登录
          </el-button>
          <el-button 
            type="primary"
            class="register-btn"
            @click="$router.push('/register')">
            <i class="el-icon-plus"></i>注册
          </el-button>
        </template>
        <template v-else>
          <el-dropdown trigger="click" @command="handleUserCommand">
            <div class="user-avatar-wrapper">
              <div class="user-avatar" v-if="userInfo.avatarUrl">
                <img :src="userInfo.avatarUrl" alt="头像">
              </div>
              <div class="user-avatar" v-else>
                <i class="el-icon-user"></i>
              </div>
              <span class="username">{{ userInfo.name || userInfo.username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">
                <i class="el-icon-user"></i>个人信息
              </el-dropdown-item>
              <el-dropdown-item command="my-reservations">
                <i class="el-icon-document-checked"></i>我的预约
              </el-dropdown-item>
              <el-dropdown-item command="logout" divided>
                <i class="el-icon-switch-button"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </div>
    </el-menu>

    <!-- 反馈对话框 -->
    <el-dialog
      title="意见反馈"
      :visible.sync="feedbackVisible"
      width="500px">
      <el-form :model="feedbackForm" :rules="feedbackRules" ref="feedbackForm" label-width="80px">
        <el-form-item label="反馈类型" prop="type">
          <el-radio-group v-model="feedbackForm.type">
            <el-radio label="BUG">功能异常</el-radio>
            <el-radio label="SUGGESTION">功能建议</el-radio>
            <el-radio label="OTHER">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="反馈内容" prop="content">
          <el-input 
            type="textarea" 
            v-model="feedbackForm.content" 
            placeholder="请详细描述您的问题或建议..." 
            :rows="5">
          </el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input 
            v-model="feedbackForm.contact" 
            placeholder="请留下您的邮箱或手机号，方便我们联系您">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="feedbackVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFeedback" :loading="feedbackSubmitting">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { feedbackApi } from '@/api/feedback'
export default {
  name: 'TopNavbar',
  data() {
    return {
      activeIndex: '/',
      feedbackVisible: false,
      feedbackSubmitting: false,
      feedbackForm: {
        type: 'bug',
        content: '',
        contact: ''
      },
      feedbackRules: {
        type: [
          { required: true, message: '请选择反馈类型', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
          { min: 10, message: '反馈内容不少于10个字符', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请留下联系方式', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn;
    },
    userInfo() {
      return this.$store.getters.currentUser || {};
    }
  },
  watch: {
    $route(to) {
      this.activeIndex = to.path;
    }
  },
  created() {
    this.activeIndex = this.$route.path;
    // 如果已登录但没有用户信息，尝试获取用户信息
    if (this.isLoggedIn && !this.userInfo.username) {
      this.fetchUserInfo();
    }
  },
  methods: {
    //我的预约
    myReservations(){
      // 校验登录
      if(!this.$store.getters.isLoggedIn){
        this.$message.error('请先登录')
        return
      }
      this.$router.push('/my-reservations')
    },    // 获取用户信息
    async fetchUserInfo() {
      try {
        const { userApi } = await import('@/api/user');
        const res = await userApi.getUserInfo();
        if (res.code === 1 && res.data) {
          this.$store.dispatch('updateUser', res.data);
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    
    showFeedback() {
      this.feedbackVisible = true
    },
    
    submitFeedback() {

      // 校验登录
      if(!this.$store.getters.isLoggedIn){
        this.$message.error('请先登录')
        return
      }

      this.$refs.feedbackForm.validate(valid => {
        if (!valid) return
        
        // this.feedbackSubmitting = true

        const request = {
          feedbackType: this.feedbackForm.type,
          content: this.feedbackForm.content,
          contactInfo: this.feedbackForm.contact,
          userId: this.$store.getters.currentUser.id
        }
        feedbackApi.submitFeedback(request).then(res => {
          if(res.code === 1){
            this.$message.success('感谢您的反馈！我们会尽快处理')
            this.feedbackVisible = false
            this.feedbackForm = {
              type: 'bug',
              content: '',
              contact: ''
            }
          }
        })
        
        // 模拟提交反馈请求
        // setTimeout(() => {
        //   this.feedbackSubmitting = false
        //   this.feedbackVisible = false
        //   this.$message.success('感谢您的反馈！我们会尽快处理')
        //   this.feedbackForm = {
        //     type: 'bug',
        //     content: '',
        //     contact: ''
        //   }
        // }, 1000)
      })
    },
    
    handleUserCommand(command) {
      if (command === 'logout') {
        this.handleLogout();
      } else if (command === 'profile') {
        this.navigateTo('/profile');
      } else if (command === 'my-reservations') {
        this.navigateTo('/my-reservations');
      }
    },
    
    // 安全导航方法，处理导航重复错误
    navigateTo(path) {
      // 如果目标路径与当前路径相同，则不导航
      if (this.$route.path === path) {
        return;
      }
      
      // 捕获导航错误
      this.$router.push(path).catch(err => {
        // 如果不是导航重复错误，则在控制台打印
        if (err.name !== 'NavigationDuplicated') {
          console.error('导航错误:', err);
        }
        // 导航重复错误可以忽略
      });
    },
    
    handleLogout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除登录状态
        this.$store.dispatch('logout');
        this.$message.success('已成功退出登录')
        
        // 如果当前页面需要登录，则跳转到首页
        const currentPath = this.$route.path
        const needLoginPaths = ['/profile', '/my-reservations']
        if (needLoginPaths.includes(currentPath)) {
          this.$router.push('/')
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.navbar-container {
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-menu-demo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
}

.brand-container {
  height: 60px;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.brand-link i {
  font-size: 24px;
  margin-right: 8px;
}

.brand-title {
  font-size: 18px;
  font-weight: bold;
}

.user-container {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.login-btn {
  color: #fff;
  border: 1px solid #fff;
  margin-right: 10px;
  padding: 8px 15px;
}

.register-btn {
  background-color: #fff;
  color: #409EFF;
  border: none;
  padding: 8px 15px;
}

.user-avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  overflow: hidden;
}

.user-avatar i {
  color: #fff;
  font-size: 20px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username {
  color: #fff;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5px;
}

.el-icon--right {
  color: #fff;
}

/* 覆盖Element-UI菜单样式 */
:deep(.el-menu--horizontal > .el-menu-item) {
  height: 60px;
  line-height: 60px;
}

:deep(.el-menu--horizontal > .el-submenu .el-submenu__title) {
  height: 60px;
  line-height: 60px;
}

@media (max-width: 992px) {
  .el-menu-demo {
    flex-wrap: wrap;
    padding: 0 10px;
  }
  
  .brand-container {
    width: 100%;
    margin-right: 0;
    justify-content: center;
  }
  
  .user-container {
    width: 100%;
    justify-content: center;
    margin: 10px 0;
  }
}
</style> 